<template>
  <div class="login">
    <van-nav-bar title="登录" left-arrow />
    <div class="container">
      <div class="title">
        <h3>手机号登录</h3>
        <p>未注册的手机号登录后将自动注册</p>
      </div>
      <div class="body">
        <div class="item">
          <input
            type="text"
            class="inp"
            v-model="phone"
            placeholder="请输入手机号"
          />
        </div>
        <div class="item">
          <input
            type="text"
            class="inp"
            v-model="code"
            placeholder="请输入图形验证码"
          />
          <img :src="picUrl" @click="getpiCode()" alt="" />
        </div>
        <div class="item">
          <input
            type="text"
            class="inp"
            v-model="msgcode"
            placeholder="请输入短信验证码"
          />
          <span class="getyzm" @click="getcodemsg">{{
            second === totalsecond ? "获取验证码" : second + `秒后重新发送`
          }}</span>
        </div>
      </div>
      <button class="btn-login" @click="login">登录</button>
    </div>
  </div>
</template>
<script >
//这里按需引用接口请求
import { getpiCode, getcode, codelogin } from "@/api/login";
export default {
  name: "logindex",
  data() {
    return {
      picUrl: "",
      code: "",
      key: "",
      totalsecond: 60,
      second: 60,
      timer: null,
      phone: "",
      msgcode: "",
    };
  },
  props: [],
  components: {},
  created() {
    //页面创建就获取图形码
    this.getpiCode();
  },
  destroyed() {
    //页面销毁就关闭定时器
    clearInterval(this.timer);
  },
  mounted() {},
  methods: {
    //获取图形码验证
    async getpiCode() {
      const {
        data: { base64, key },
      } = await getpiCode();
      this.picUrl = base64;
      this.key = key;
    },
    //前两项验证通过，获取手机验证码
    async getcodemsg() {
      if (!this.vaildFn()) {
        return;
      }
      if (!this.timer && this.totalsecond === this.second) {
        await getcode(this.code, this.key, this.phone);
        this.$toast.success("短信发送成功,请注意查收");
        this.timer = setInterval(() => {
          this.second--;
          if (this.second < 1) {
            clearInterval(this.timer);
            this.timer = null;
            this.second = this.totalsecond;
          }
        }, 1000);
      }
    },
    //手机号，图形码验证
    vaildFn() {
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.$toast("请输入正确的手机号");
        return false;
      }
      if (!/^\w{4}$/.test(this.code)) {
        this.$toast.fail("请输入正确的图形验证码");
        return false;
      }
      return true;
    },
    //都通过了登录
    async login() {
      if (!this.vaildFn()) {
        return;
      }
      if (!/^\d{6}$/.test(this.msgcode)) {
        this.$toast("请输入正确的手机验证码");
        return;
      }
      const res = await codelogin(this.phone, this.msgcode);
      this.$store.commit("user/setUserInfo", res.data);

      this.$toast("登录成功");
      const url=this.$route.query.backUrl || '/'
      this.$router.replace(url);
    },
  },
};
</script>
<style lang='less' scoped>
.container {
  width: 100%;
  margin-top: 35px;
  padding: 0 20px;
  .title {
    text-align: left;
    h3 {
      font-size: 28px;
      font-weight: normal;
      margin-bottom: 10px;
    }
    p {
      color: #ccc;
    }
  }
  .body {
    font-size: 14px;
    width: 100%;
    .item {
      margin-top: 15px;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #a4a4a4;
      .inp {
        padding-left: 5px;
      }
      img {
        padding: 5px;
        width: 130px;
        height: 45px;
        vertical-align: center;
      }
      .getyzm {
        padding-right: 5px;
        color: #dcbc1a;
      }
    }
  }
  .btn-login {
    margin-top: 40px;
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, rgb(249, 242, 35), rgb(255, 202, 27));
    border-radius: 25px;
  }
}
</style>